<template>
  <div
    class="control-button-group"
  >
    <el-button
      :icon="arrowIconClass"
      circle
      :disabled="disabledArray[0]"
      @click="handleArrowToggle"
    >
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="disabledArray[1]"
      @click="handleAdd"
    >
      增 加
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-copy-document"
      :disabled="disabledArray[2]"
      @click="handleCopy"
    >
      复 制
    </el-button>
    <el-button
      type="danger"
      icon="el-icon-delete"
      :disabled="disabledArray[3]"
      @click="handleDelete"
    >
      删 除
    </el-button>
    <el-dropdown
      v-loading="isStatusChangeButtonLoading"
      class="dropdown"
      split-button
      type="primary"
      :disabled="disabledArray[4]"
      @click="handleStatusChange"
      @command="handleCommand"
    >
      控制启停
      <el-dropdown-menu
        slot="dropdown"
      >
        <el-dropdown-item
          :command="1"
        >
          启用
        </el-dropdown-item>
        <el-dropdown-item
          :command="0"
        >
          停用
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="disabledArray[5]"
      @click="handleRoleArrayAppoint"
    >
      分配角色
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-refresh"
      :disabled="disabledArray[6]"
      @click="handleRefresh"
    >
      刷 新
    </el-button>
    <div class="placeholder"></div>
    <el-button
      type="text"
      icon="el-icon-menu"
      class="view-manager-button"
      :disabled="disabledArray[7]"
      @click="handleViewManagerShow"
    >
    </el-button>
  </div>
</template>

<script>
/**
 * # 控制按钮组
 * 由`子系统管理器`开关、`增加`、`复制`、`删除`、`控制启停`、`控制启停`下拉菜单、`分配角色`和`视图管理器`开启按钮组成的按钮组
 * |    按钮名称或描述    |                                                              作用                                                              |
 * | :------------------: | :----------------------------------------------------------------------------------------------------------------------------: |
 * |  `子系统管理器`开关  |                                                打开或关闭侧边栏的`子系统管理器`                                                |
 * |        `增加`        |                                             打开`用户数据表单`，并使其处于增加模式                                             |
 * |        `复制`        |   打开`用户数据表单`，并使其中的数据和被勾选的`用户数据表格`行的用户数据相同（密码设为空），同时使`用户数据表单`处于增加模式   |
 * |        `删除`        |                      弹出确认对话框，并根据用户点击的按钮决定是否删除被勾选的`用户数据表格`的行的用户数据                      |
 * |      `控制启停`      |                                                        按钮本身没有作用                                                        |
 * |  `控制启停`下拉菜单  | `启用`：将被勾选的`用户数据表格`行的用户数据的状态设置为`启用`；`停用`：将被勾选的`用户数据表格`行的用户数据的状态设置为`停用` |
 * |      `分配角色`      |                                                        打开`角色分配器`                                                        |
 * | `视图管理器`开启按钮 |                                                        打开`视图管理器`                                                        |
 * |        `刷新`        |                         重置页码、页面容量、表格数据、（由用户选择是否）清空被勾选项，重新获取表格数据                         |
 */
export default {
  'name': 'ControlButtonGroup',

  'props': {
    /**
     * 按顺序设置`控制按钮组`中的按钮是否为不可用状态的数组
     * @type {[
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     * ]}
     */
    'disabledArray': {
      'default' () {
        return Array(8).fill(false)
      },
      'type': Array,
    },
    /**
     * 设置`控制启停`按钮是否为加载状态
     */
    'isStatusChangeButtonLoading': {
      'default': false,
      'type': Boolean,
    },
  },

  'data' () {
    return {
      /**
       * `子系统管理器`的开关按钮的图标的类
       *
       * 'el-icon-arrow-right'为向右的箭头，此时`子系统管理器`应该处于关闭状态
       *
       * 'el-icon-arrow-left'为向左的箭头，此时`子系统管理器`应该处于打开状态
       *
       * @type {'el-icon-arrow-right' | 'el-icon-arrow-left'}
       */
      'arrowIconClass': 'el-icon-arrow-right',
    }
  },

  'methods': {
    /**
     * 处理`增加`按钮的点击事件
     */
    'handleAdd' () {
      this.$emit('add')
    },
    /**
     * 处理`子系统管理器`的开关按钮的点击事件
     */
    'handleArrowToggle' () {
      this.$emit('arrow-toggle')
      this.arrowIconClass =
        this.arrowIconClass === 'el-icon-arrow-right'
          ? 'el-icon-arrow-left'
          : 'el-icon-arrow-right'
    },
    /**
     * 处理`控制启停`下拉菜单命令的点击事件
     *
     * @param {0 | 1} command 指令：`0`表示停用，`1`表示启用
     */
    'handleCommand' (command) {
      this.$emit('command', command)
    },
    /**
     * 处理`复制`按钮的点击事件
     */
    'handleCopy' () {
      this.$emit('copy')
    },
    /**
     * 处理`删除`按钮的点击事件
     */
    'handleDelete' () {
      this.$emit('delete')
    },
    /**
     * 处理`刷新`按钮的点击事件
     */
    'handleRefresh' () {
      this.$emit('refresh')
    },
    /**
     * 处理`分配角色`按钮的点击事件
     */
    'handleRoleArrayAppoint' () {
      this.$emit('role-allocate')
    },
    /**
     * 处理`控制启停`按钮的点击事件
     */
    'handleStatusChange' () {
      this.$emit('status-change')
    },
    /**
     * 处理`视图管理器`的打开按钮的点击事件
     */
    'handleViewManagerShow' () {
      this.$emit('view-manager-show')
    },
  },
}
</script>

<style scoped lang="scss">
.control-button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .dropdown {
    margin: 0 8px;
  }

  .placeholder {
    flex-grow: 1;
  }

  .view-manager-button {
    color: #409eff;
    font-size: 24px;
    cursor: pointer;

    &:hover {
      opacity: 0.6;
    }
  }
}
</style>
